<template>
  <div class="search-container">
    <div class="search">
      <span class="back-btn" @click="goBack"></span>
      <div class="search-wrapper">
        <form id="myform" action="" data-reactid=".0.0.1.0">
          <input
            class="search-input"
            type="text"
            placeholder="搜索你喜欢的宝贝"
            data-reactid=".0.0.1.0.0"
          />
        </form>
        <label class="search-icon" data-reactid=".0.0.1.1">
          <img
            src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/search-ico.png"
            alt=""
            data-reactid=".0.0.1.1.0"
          />
        </label>
      </div>
      <a class="search-btn" data-reactid=".0.0.2">搜索</a>
    </div>
    <div class="hot">
      <p class="title">
        <img
          src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/rmss.png"
          alt=""
        />
        <span>精品推荐</span>
      </p>
      <div class="label" data-reactid=".0.1.1">
        <a class="fl bgfff round20" data-reactid=".0.1.1.0">周期配送</a>
        <a class="fl bgfff round20" data-reactid=".0.1.1.1"
          >爱立方LOVE AROUND</a
        >
        <a class="fl bgfff round20" data-reactid=".0.1.1.2">Farmina</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.3">比乐Bile</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.4">卡比</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.5">go!</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.6"
          >美毛黄金搭档-卵磷脂+鱼油</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.7"
          >小青鲨super shark</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.8">原始猎食渴望</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.9">腹泻急救包</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.a">醇粹Purich</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.b">卵磷脂</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.c">麦富迪Myfoodie</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.d"
          >卡比CANIDAE[高性价比]</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.e">法明娜神仙适口性</a
        ><a class="fl bgfff round20" data-reactid=".0.1.1.f">now</a>
      </div>
    </div>

    <div class="recently" data-reactid=".0.2">
      <p class="title bgfff" data-reactid=".0.2.0">
        <img
          src="//static.epetbar.com/static_wap/epetapp/pages/search/images/zjss.png"
          alt=""
          data-reactid=".0.2.0.0"
        /><span data-reactid=".0.2.0.1">最近搜索</span>
      </p>
      <div class="wrapper" data-reactid=".0.2.1">
        <a class="db brand bgfff" data-reactid=".0.2.1.0">你好</a>
      </div>
    </div>

    <div class="empty" data-reactid=".0.3">清空搜索历史</div>
  </div>
</template>
 
<script>
export default {
    methods:{
        goBack() {
            this.$router.back();
        }
    }
};
</script>
 
<style scoped lang = "stylus">
.search-container
  background: #f6f6f6;
  width 100%
  height 100%
.search {
  display: flex;
  justify-content: space-between;
  width: 100%;
  heigth: 0.49rem;
  padding: 0.07rem 0.12rem;
  background: #ffffff;
}

.back-btn {
  width: 16px;
  height: 16px;
  margin-top: 8px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

#myform {
  flex: 1;
}

.search-btn {
  display: block;
  width: 0.32rem;
  line-height: 0.35rem;
  height: 0.35rem;
  font-size: 0.16rem;
  color: #333;
  margin-left: 0.05rem;
}

.search-wrapper {
  display: flex;
  flex: 1;
  background: #f6f6f6;
  padding: 0 0.1rem;
  height: 0.35rem;
  line-height: 35px;
  border-radius: 0.05rem;
}

.search-input {
  height: 0.35rem;
  background: #f6f6f6;
  font-size: 14px;
  padding-right: 0;
  padding-left: 0;
  border: 0;
}

.search-icon {
  width: 0.16rem;
  height: 0.35rem;

  img {
    height: 16px;
    margin-top: -2px;
    vertical-align: middle;
  }
}

.title {
  height: 0.3rem;
  padding-left: 0.12rem;
  line-height: 0.3rem;
  background: #fbfbfb;
  font-size: 0.14rem;

  img {
    /* width .2rem */
    height: 0.2rem;
    margin: -2px 8px 0 0;
    vertical-align: middle;
  }

  span {
    color: #666;
    font-size: 0.14rem;
  }
}

.label {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px 23px;

  &>a {
    display: inline-block;
    padding: 3px 10px;
    margin: 10px 10px 0 0;
    color: #999;
    font-size: 12px;
    border-radius: 15px;
    background: #fff;
  }
}
.recently
    color #333

.wrapper
    background #fff
    height .4rem
    padding-left .1rem
    color #333
    line-height .4rem
    font-size .12rem
.empty
    width: 60%;
    text-align center
    margin: 40px auto 60px;
    line-height: 40px;
    font-size: 15px;
    border: 1px solid #777;
    border-radius: 5px;



</style>